<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>

        <!-- 1.3 渲染父组件 -->
        <parent></parent>

    </div>

    <!-- 1.2  注册父组件 -->
    <template id="parent">
        <div>
            <h3>parent - 父组件</h3>
            <p>
                <input type="text" v-model="msg">
            </p>
            <hr>
            <!-- 4. 把 子组件 丢进 父组件 里面     形成 父子组件   子组件1 和 子组件2 形成 兄弟组件-->
            <!-- 5. 父组件 给 子组件 传值 -->

            <!-- CCC => 父组件 监听 -->
            <childone 
            :count="1000"
            v-on:myclck="getNewMsgFromChid"></childone> 
            <childtwo :msg="msg"></childtwo>
        </div>
    </template>


    <!-- 2.2 注册第一个子组件 -->
    <template id="childone">
        <div>
            <!-- 7. 渲染 父组件 传来的值 -->
            <h4>childone - 1 - 子组件</h4>

            <!-- AAA => 子传父   子元素自定义一个事件     -->
            <button @click = "changeparent">自定义事件 点击修改父组件的msg</button>
            
            <!-- 7. 渲染 父组件 传来的值 -->
            <p> count --- {{count}} </p> 

            <hr>
        </div>
    </template>


    <!-- 3.2 注册第二个子组件 -->
    <template id="childtwo">
        <div>
            <h4>childtwo - 2 - 子组件</h4>
            
            <p> msg --- {{msg}} </p>
            <hr>
        </div>
    </template>


</body>
<script>
    // 1.1  先注册一个父组件
    Vue.component("parent", {
        template: "#parent",
        data() { // 必须是一个函数 
            return { // 必须返回一个对象
                msg: "每天进步一点点"
            } 
        },
        methods:{ // DDDD  通过方法 接收 子组件 传来的值
            getNewMsgFromChid(msg){
                this.msg = msg
            }
        }
    })

    // 2.1 注册第一个子组件
    Vue.component("childone", {
        template: "#childone",
        props: ["count"],  // 6. 接收 父组件  传来的值

        /* BBB => 子组件 自定义事件的方法  向 父组件 传递 */
        methods:{
            changeparent(){
                // $emit 向 父组件 发送
                this.$emit("myclck","真心累啊")
            }
        }
    })

    // 3.1 注册第二个子组件
    Vue.component("childtwo", {
        template: "#childtwo",
        props: {  // 6. 接收 父组件  传来的值
            msg: String
        }
    })



    const header = {
        template: "<header>header - header -header</header>"
    }
    Vue.component("myHeader", header)


    const vm = new Vue({
        data: {
            title: "注册全局组件"
        },
        methods: {

        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title
        }
    }).$mount("#app")
</script>

</html>